<template>
  <div class="search-main-box">
    <div class="head-box">
      <PageHeader :parActiveName="activeName" />
    </div>
    <div class="search-and-add-box">
        <div class="search-box">
          <Search :type="type" :searchDailyInfo="searchDailyInfo" />
        </div>
        <div class="file-upload-box">
              <div @click="openAddItem"><i class="el-icon-plus"></i></div>
          </div>
      </div>
    <div class="table-box">
      <Table :tableData="showDailyData" />
    </div>
    <div>
        <AddItemDrawer ref="addItemRef" :drawer="drawer" :getDailyInfoList="getDailyInfoList" />
    </div>
    <div class="pagination-box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import Search from '@/components/Search.vue'
import Table from './ui/Table.vue'
import AddItemDrawer from './ui/AddItemDrawer.vue'

import { getDailyInfoListApi } from '@/api/index'
export default {
  data () {
    return {
      activeName: 'fourth',
      // 日报列表
      type: 'daily',
      // 日报列表
      dailyList: [],
      drawer: false,
      // 展示的项目源数据
      showDailyData: [],
      // 当前点击的项目
      projectRow: null,
      // 搜索条件
      empname: '',
      createtime: '',
      code: '',
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  components: {
    PageHeader,
    Search,
    AddItemDrawer,
    Table
  },

  mounted () {
    this.getDailyInfoList()
  },

  methods: {
    // 获取日报列表
    async getDailyInfoList () {
      let data = {
        skipcount: (this.currentPage - 1) * this.pageSize,
        maxresultcount: this.pageSize
      }
      let res = await getDailyInfoListApi(data)
      this.total = res.total
      console.log('日报列表----->', res)
      this.showDailyData = [ ...res.dailyPapers ]
      this.showDailyData.forEach((item, index) => {
        this.showDailyData[index].createtime = item.createtime.split('T')[0]
      })
    },

    // 打开新增抽屉
    openAddItem (row) {
      this.projectRow = { ...row }
      this.$refs.addItemRef.openDrawer(row)
    },

    async searchCriteria () {
      if (this.empname && this.createtime && this.code) {
        this.$message.warning('请输入筛选条件！！！')
        return
      }
      let data = {
        empname: this.empname,
        createtime: this.createtime,
        code: this.code
      }
      let res = await getDailyInfoListApi(data)
      this.showDailyData = res
      if (res.length) {
        this.showDailyData.forEach((item, index) => {
          this.showDailyData[index].createtime = item.createtime.split('T')[0]
        })
      }
    },

    // 搜索赋值
    setShowDailyData (data) {
      this.showDailyData = data
      this.showDailyData.forEach((item, index) => {
        this.showDailyData[index].createtime = item.createtime.split('T')[0]
      })
    },

    // 上搜索条件
    async searchDailyInfo (value, num) {
      let data = {
        empname: null, 
        createtime: null, 
        code: null,
        skipcount: (this.currentPage - 1) * this.pageSize,
        maxresultcount: this.pageSize
      }
      switch (num) {
      case 0 :
        data.empname = value
        break
      case 1:
        data.createtime = value
        break
      case 2:
        data.code = value
        break
      }
      let res = await getDailyInfoListApi(data)
      this.total = res.total
      console.log('日报列表----->', res)
      this.showDailyData = [ ...res.dailyPapers ]
      this.showDailyData.forEach((item, index) => {
        this.showDailyData[index].createtime = item.createtime.split('T')[0]
      })
    },

    // 修改每页大小
    async handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      let params = {
        skipcount: (this.currentPage - 1) * this.pageSize,
        maxresultcount: this.pageSize
      }
      let res = await getDailyInfoListApi(params)
      this.total = res.total
      this.showProData = res.dailyPapers
    },
    // 切换页码
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      let params = {
        skipcount: (this.currentPage - 1) * this.pageSize,
        maxresultcount: this.pageSize
      }
      let res = await getDailyInfoListApi(params)
      this.total = res.total
      this.showProData = res.dailyPapers
    }
  }
}
</script>

<style lang="scss" >
.search-main-box {
  width: 100%;
  .search-and-add-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;

  /* border: 1px solid red; */
  .search-box {
  /* border: 1px solid red; */
  width: 25%;
  margin-top: 20px;
}
.file-upload-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 40px;
  margin-top: 10px;

  /* border: 1px solid red; */
  >div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 80%;
  color: #FFF;
  font-size: 16px;
  background: #85ce61;
  border-radius: 5px;
  &:hover {
    cursor: pointer;
  }
  &:active {
    background: rgba($color: #85ce61, $alpha: 50%);
  }
  }
}
}
.pagination-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 80%;
  height: 30px;
  margin-top: 10px;
  margin-left: 10%;

  /* background: #000; */
}
}
.search-criteria {
  display: flex;
  justify-content: start;
  width: 80%;
  height: 30px;

  /* border: 1px solid red; */
  margin-top: 10px;
  margin-left: 10%;
  > div {
    display: flex;
    width: 25%;
    > div {
      width: 80px;

      /* border: 1px solid blue; */
      height: 30px;
      line-height: 30px;
      text-align: end;
    }
    .el-input {
      width: 180px;
    }
  }
}
.table-box {
  /* border: 1px solid blue; */
  width: 80%;
  height: 100%;
  margin-top: 10px;
  margin-left: 10%;

  /* overflow: auto; */
}
.el-table {
  height: 450px;
}
.screen-box {
  /* border: 1px solid red; */
  width: 80%;
  margin-left: 150px;
  > input {
    height: 25px;
    margin-top: 5px;
    margin-right: 5px;
    border: 1px solid #e4e6ec;
  }
}
.el-date-editor {
  margin-right: 5px;
}
.el-tabs__nav-scroll {
  /* border: 1px solid red; */
  width: 600px;
  margin-left: 150px;
}
</style>